<!DOCTYPE html>
<html 
	onmouseup="mouseup(event)"
	onmousedown="mousedown(event)"
	onmousemove="mouseover(event)">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="timetable"></div>
		<button id="clear">清空</button>
		<div id="showSelected"></div>
		<input id="yearInput" placeholder="年份" style="line-height: 2rem; width: 50%;margin-left: 25%;margin-bottom: 1rem;"/>
		<input id="monthInput" placeholder="月份" style="line-height: 2rem; width: 50%;margin-left: 25%;margin-bottom: 1rem;"/>
		<button id="confirm" style="height:2rem; width:10rem;margin: 0 auto;">确认</button>
	</body>
	<style>
		body{
			display: flex;
			flex-direction: column;
		}
		#timetable{
			justify-content: center;
			align-items: center;
			align-content: center;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;
			margin: 0 auto;
			margin-top: 10rem;
		}
		#timetable .tr{
			display: flex;
			flex: row;
		}
		#timetable .tr .cell{
			border: #000000 1px solid;
			height: 2.5rem;
			line-height: 2.5rem;
			text-align: center;
			width: 2rem;
		}
		#timetable .tr .title{
			border: #000000 1px solid;
			height: 2.5rem;
			line-height: 2.5rem;
			text-align: center;
			width: 2rem;
			background-color: bisque;
		}
		#clear{
			justify-content: center;
			align-items: center;
			align-content: center;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;
			margin: 2rem auto;
		}
		#showSelected{
			text-align: center;
			margin: 0 auto;
			width: 80%;
		}
		.selected{
			background-color: grey !important;
		}
		.today{
			background-color: cornflowerblue;
		}
	</style>
	<script>
		//定义行数、列数和天数
		var hang = 6,lie = 7,days = 30,year = new Date().getFullYear() ,month = new Date().getMonth() + 1,day = new Date().getDate();
		//鼠标按下和抬起的坐标
		var startX1 = 0,startY1 = 0,endX1 = 0,endY1 = 0,flag = false;
		var weekday = ["日", "一", "二", "三", "四", "五", "六"];
		
		//判断润年
		function isLeapYear(year){
			if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) return true;//2月份29日
			return false;
		}
		//判断日期的星期
		function monthStartWeek(date){
			console.log(date);
			let ind = new Date(date).getDay();
			return ind;
		}
		//获取天数
		function getDays(){
			if(month == 2){
				days = 28;
				if(isLeapYear(year)) days = 29;
			}else if([1,3,5,7,8,10,12].indexOf(parseInt(month)) != -1){
				days = 31;
			}else{
				days = 30;
			}
		}
		getDays();
		
		//确定按钮
		let confirm = document.getElementById('confirm');
		confirm.onclick =function(){
			year = document.getElementById('yearInput').value;
			month = document.getElementById('monthInput').value;
			getDays();
			// let ind = monthStartWeek(year + '-' + month + '-1');
			let ind = new Date(year + '-' + month + '-01').getDay();
			drawTable(ind);
		}
		
		//绘制表格
		function drawTable(ind){
			console.log('111111111',ind);
			let timetable = document.getElementById('timetable');
			timetable.innerHTML = "";
			//-------------表头------------
			let tr = document.createElement('div');
			tr.classList.add('tr');
			for(let i = 0; i < lie; i++){
				let node = document.createElement('div');
				let text = weekday[i];
				node.innerText = text;
				node.classList.add('title');
				tr.appendChild(node); 
			}
			timetable.appendChild(tr);
			//-----------------
			console.log('year',year,'month',month,'days',days);
			for(let i = 0; i < hang; i++){
				let tr = document.createElement('div');
				tr.classList.add('tr');
				for(let j = 0; j < lie; j++){
					let text = i * lie + j - ind + 1;
					let node = document.createElement('div');
					if(text == day) node.classList.add('today');
					if(text > 0) node.innerText = text;
					node.classList.add('cell');
					tr.appendChild(node); 
					if(text >= days){
						timetable.appendChild(tr);
						return;
					} 
				}
				timetable.appendChild(tr); 
			}
		}
		
		drawTable(new Date(year + '-' + month + '-01').getDay());
		
		//监听鼠标按下
		function mousedown(e) {
			// console.log('down');
			startX1 = e.x;
			startY1 = e.y;
			flag = true;
		}
		//监听鼠标抬起
		function mouseup(e) {
			select(e.x,e.y);
			flag = false;
		}
		//监听鼠标移动
		function mouseover(e){
			//判断鼠标是不是为按压状态
			if(!flag) return;
			select(e.x,e.y);
		}
		//选择区间
		function select(x,y){
			endX1 = x;
			endY1 = y;
			let timetable = document.getElementById('timetable');
			//获取小格子的宽高、表格的宽高
			let cell = document.getElementsByClassName('cell')[0];
			let cellH = cell.offsetHeight,
				cellW = cell.offsetWidth,
				tableL = timetable.getBoundingClientRect().left,
				tableT = timetable.getBoundingClientRect().top,
				tableR = timetable.getBoundingClientRect().right,
				tableB = timetable.getBoundingClientRect().bottom;
			tableR = tableL + lie * cellW;
			tableB = tableT + hang * cellH;
			//小的为开始坐标、大的为结束坐标
			let startX = Math.min(startX1,endX1),
				startY = Math.min(startY1,endY1),
				endX = Math.max(startX1,endX1),
				endY = Math.max(startY1,endY1);
			//转换为数组下标
			let indsx = Math.max(Math.floor((startX - tableL)/cellW),0);
			let indsy = Math.max(Math.floor((startY - tableT)/cellH),0);
			let index = Math.min(Math.floor((endX - tableL)/cellW),lie - 1);
			let indey = Math.min(Math.floor((endY - tableT)/cellH),hang);
			let tr = timetable.children;
			
			//将选择的内容展示出来
			let showSelected = document.getElementById('showSelected');
			let showtext = [];
			
			//循环找出当前选中的区域并做上标记，并将未选中的区域标记去除
			for(let i = 0; i < tr.length; i++){
				let td = tr[i].children;
				for(let j = 0; j < td.length; j++){
					if(i >= indsy && i <= indey && j >=indsx && j <= index){
						if(td[j].innerText.length == 0) continue;
						if(i > 0) td[j].classList.add('selected');
						if(i > 0) showtext.push(td[j].innerText);
					}else{
						td[j].classList.remove('selected')
					}
				}
			}
			showSelected.innerText = showtext.join('、');
		}
		
		//清空选择区域
		var clear = document.getElementById("clear"); 
		clear.onclick =function(){
			console.log('清空');
			let timetable = document.getElementById('timetable');
			let tr = timetable.children;
			for(let i = 0; i < tr.length; i++){
				let td = tr[i].children;
				for(let j = 0; j < td.length; j++){
					td[j].classList.remove('selected');
				}
			}
		}
	</script>
</html>
